
/*Chrome滚动条样式*/
::-webkit-scrollbar {
    width: 3px;
    height: 3px;

}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.8);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb {
    border-radius: 3px;
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.8);
    background-color: #aaa;
}

* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

html, body {
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  margin:0;
  padding:0;
  background:#000;
  overflow:hidden;
}

#map {
  z-index:0;
  width:100%;
  height:100%;
  opacity: 0;
  transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -webkit-transition: opacity .5s ease-in-out;
}

#map svg {
  z-index:10;
}

#active {
  position:fixed;
  left:10px;
  top:0;
  color:#aaa;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-weight:normal;
  font-size:16px;
  z-index:10;
}

#active-number {
  font-size:50px;
  vertical-align:middle;
}

#markers {
  z-index:20;
  position:absolute;
  left:0;
  top:0;
}

.marker {
  position:absolute;
  background:url('../images/maptail-marker.png') top left no-repeat;
  width:34px;
  height:34px;
  margin-top:-12px;
  margin-left:-12px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -webkit-transition: opacity .5s ease-in-out;
}

#map.fadeIn, .marker.fadeIn {
   opacity: 1;
}

.marker .data {
  position:absolute;
  background:rgba(0,0,0,0.84);
  color:yellow;
  top:-26px;
  left:-32px;
  width:100px;
  display:none;
  font-family:Lucida Grande, Arial, Helvetica, sans-serif;
  font-size:12px;
  line-height:14px;
  white-space:nowrap;
  padding:2px 0;
  border-radius:0px;
  border:1px solid rgba(255,255,255,0.1);
  text-align:center;
}

.marker:hover, .marker.hovered {
  opacity:1.0 !important;
}

.marker:hover .data, .marker.hovered .data {
  display:block;
  z-index:10000;
}

#citylist {
  position:fixed;
  right:0;
  top:0;
  padding:4px;
  text-align:right;
  z-index:30;
  color:#999;
  font-family:Lucida Grande, Arial, Helvetica, sans-serif;
  font-size:13px;
  height:800px;
  cursor:pointer;
  overflow-y: scroll;
}

#citylist div:hover, #citylist div:hover > *, #citylist div.hovered, #citylist div.hovered > * {
  color:yellow !important;
}

.city {
  color:#999;
  cursor: pointer;
}

.country {
  color:yellow;
}

#controls {
  position:fixed;
  top:10px;
  z-index:30;
  color:#999;
  font-size:13px;
  font-weight: bold;
  left: 48%;
  text-align: center;
  cursor: pointer;
  font-family:Lucida Grande, Arial, Helvetica, sans-serif;
}

#controls .btn {
    height: 24px;
    width: 24px;
    float: left;
    background: #222;
    opacity: .9;
    line-height: 24px;
}

#controls .btn.active {
    color: yellow;
    background: #666;
}

